Ccay.Module.define("Ccay.example.ui.igird.eventFunction", function(page, $S)
{
	page.ready = function () {
		
		var gridOption = {
			headTip: true,
			editMode: true,
			autoLoad: false,
			wrapHead: false,
		    columns: [
		    	{field: 'id', columnType:'select', multi:true},
		 		{field: 'name', width:90, header: "ccay.common.label.name"},
		 		{field: 'sex', width:70, header: "sSex", type: 'bool', format: {isIcon: true}},
		 		{field: 'age', width:70, header: "sAge", type: 'integer', rule: {range: [16, 80]}},
		 		{field: 'birthday', width:110, header: "sBirthday", type: 'date'},
		 		{field: 'blog', width:300, header: "sBlog", rendererType: 'ellipsis'},
		 		{field: 'lastUpdateDate', width:130, header: "ccay.common.label.lastUpdatedDate", type: 'datetime', content: "${#getLastTime(lastUpdateDate)}"}
		    ],
		    fnInit: function (op) {
		    	$S("#divShowEvent11").html("fnInit：IGrid初始化的事件！");
		    },
		    fnInitComplete: function (op) {
		    	$S("#divShowEvent01").html("fnInitComplete：IGrid完成初始化之后的事件，已正常显示表格框架！");
		    },
		    fnBeforeRequest: function (op) {
		    	$S("#divShowEvent02").html("fnBeforeRequest：IGrid发送请求之前的事件！");
		    },
		    fnBeforeBindData: function (op, data, pageVO) {
		    	$S("#divShowEvent03").html("fnBeforeBindData：IGrid绑定数据之前的事件！");
		    },
		    fnDataBindComplete: function () {
		    	$S("#divShowEvent04").html("fnBindDataComplete：IGrid绑定数据绑定数据源完成之后的事件");
		    },
 		    fnComplete: function () {
		    	$S("#divShowEvent05").html("fnComplete：IGrid完成加载之后的事件，已正常显示绑定数据之后表格！");
		    },
		    fnBeforeEdit: function (value, td, col) {
		    	$S("#divShowEvent06").html("fnBeforeEdit：IGrid编辑之前的事件，当前开始编辑<span class='showClew'> " + col.field + " </span>列！");
		    	return true;
		    },
		    fnEndEdit: function (value, rowData, td, col) {
		    	$S("#divShowEvent07").html("fnEndEdit：IGrid编辑之后的事件，比如编辑完成之后改变该行数据显示");
		    	rowData.name = "瞧瞧，我变了！";
		    	rowData.sex = (rowData.sex == 1) ? 0 : 1;
		    	return true;
		    },
		    fnSort: function (sortField, sort, cell) {
		    	$S("#divShowEvent08").html("fnSort：IGrid排序事件，当前是按照<span class='showClew'> " + sortField + " </span>列进行<span class='showClew'> " + sort + " </span>排序！");
		    	return true;
		    },
		    fnResize: function (width, col, cell) {
		    	$S("#divShowEvent09").html("fnResize：IGrid列大小改变事件，当前<span class='showClew'> " + col.field + " </span>列的大小是：<span class='showClew'> " + width + " </span>px!");
		    	return true;
		    },
		    fnSelected: function (selected, tr, rowData) {
		    	$S("#divShowEvent10").html("fnSelected：IGrid选中之后的事件，当前选中的数据的名称是：<span class='showClew'> " + rowData.name + "</span>");
		    },
			onMouseOver:function (value,rowData,td,tr){
				var manager=$("#iStudent").manager();
				var col=manager.getColumnOp(td);
				if(col.field=='birthday'&& value!=''){			
					td.tip({action:'once',content:rowData.birthday,autoClose:true,delayClose:500,global:true});
				}				
			},
			ajax:{
			   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
			},
			 operation: {
		    	search: {
		    		btn: '#btnLoad'
		    	}
		    }
		};
		
		
		var gridOption2 = {
			editMode: true,
			wrapHead: false,
			serialSeq: false,
		    columns: [
		    	{field: 'id', columnType:'select', multi:true},
		 		{field: 'name', width:130, header: "ccay.common.label.name", rule: {required: true}},
		 		{field: 'sex', width:70, header: "sSex", type: 'bool', format: {isIcon: true}},
		 		{field: 'age', width:70, header: "sAge", type: 'integer'},
		 		{field: 'birthday', width:90, header: "sBirthday", type: 'date'},
		 		{field: 'blog', width:130, header: "sBlog", renderer: 'ellipsis'},
		 		{field: 'lastUpdateDate', width:130, header: "ccay.common.label.lastUpdatedDate", type: 'datetime', editable: false, content: "${#getLastTime(lastUpdateDate)}"}
		    ],
		    fnBeforeRowEdit: function (rowData, row) {
		    	$S("#divShowEvent1").html("fnBeforeRowEidt：IGrid行编辑之前的事件，返回false，将不进行行编辑。当前开始编辑的行索引是：<span class='showClew'> " + this.getRowIndex(row) + " </span>！");
		    },
		    fnEndRowEdit: function (rowData, row) {
		    	$S("#divShowEvent2").html("fnEndRowEdit：IGrid行编辑之后的事件，返回true，将进行整行渲染。当前结束编辑的行索引是：<span class='showClew'> " + this.getRowIndex(row) + " </span>！");
		    },
			ajax:{
			   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
			},
			operation: {
		    	search: {
		    		btn: '#btniStudentSearch',
					panel: '#fmiStudent'
		    	},
		    	del: {
		    		btn: '#btniStudentDel',
		    		undoBtn: '#btniStudentUndoDel'
		    	},
		    	insert: {
		    		btn: '#btniStudentAdd',
		    		copy: true,
		    		clear: ['id', 'name', 'lastUpdateDate'],
		    		defaultRow: {sex: 1, blog: 'http://'}
		    	},
		    	save: {
		    		btn: '#btniStudentSave',
		    		ajax: {
		    			url: "services/ccay/demo/student/batch"
		    		}
		    	}
		    }
		};
		
		$S("#eventFunctionDemo").ccayTab();
		
		getLastTime = function(data){
			return Ccay.Format.toDateBefore(data && data.getUTCTime());
		};
		
		//点击tab头后，才加载数据，只第一次生效
		$S("li[tabid='tab2']").one("click", function () {
			$S("#iStudent").igrid(gridOption);
		});
		
		$S("li[tabid='tab3']").one("click", function () {
			$S("#grdiStudent").igrid(gridOption2);
		});
	};

	page.openDemo = function(tabId){
			$S("#eventFunctionDemo").getCcayTabManager().selectItem(tabId);
			$S("li[tabid='" + tabId + "']").click();
		};
});